<template>
  <div class="create-list-box">
    <div class="relsaer-thing-title">
      <span class="back-up" @click="backUp">
        <van-icon name="arrow-left"/>
      </span>
      发布{{typeWords}}
      
    </div>
    <div class="release-thing">
      <div class="release-list-box">
        <span class="release-title">发布主题</span>
        <input type="text" placeholder="发布主题 / 例如:出售大学英语教材(必填)" v-model="theme" maxlength="255">
      </div>

      <div class="release-list-box">
        <span class="release-title">交易类型</span>
        <select class="project-button" v-model="selectValue1" @change="selectType(selectValue1)">
          <option :value="list" v-for="(list, index) in transactionType" :key="index">{{list}}</option>
        </select>
      </div>

      <div class="release-list-box">
        <span class="release-title">交易方式</span>
        <select class="project-button" v-model="selectValue2" @change="selectMode(selectValue2)">
          <option :value="list" v-for="(list, index) in transactionMode" :key="index">{{list}}</option>
        </select>
      </div>

      <div class="release-list-box">
        <span class="release-title">联系方式(不建议直接填写手机)</span>
        <input
          type="text"
          placeholder="仅限填写QQ或者微信(必填)"
          v-model="contactInformation"
          maxlength="255"
        >
      </div>
      <div class="release-list-box">
        <span class="release-title">交易地点(请填写校内地址)</span>
        <input type="text" placeholder="请勿填写校外地址(必填)" v-model="tradeAddress" maxlength="255">
      </div>

      <div class="release-list-box">
        <span class="release-title">预期交易总价值(元)</span>
        <input type="number" placeholder="请填写预期的交易总价值(元)(必填)" v-model="tradePrice" maxlength="255">
      </div>

      <div class="release-list-box">
        <span class="release-title">上传实物图片</span>
        <div>
          <van-uploader
            v-model="fileList"
            multiple
            :max-count="2"
            :after-read="afterRead"
            :before-read="beforeRead"
          />
        </div>
      </div>
      <!-- <input type="file" class="uploadImg" id="upload"> -->

      <div class="release-list-box">
        <span class="release-title">产品介绍</span>
        <textarea
          name
          id
          cols="30"
          rows="10"
          v-model="productIntroduction"
          placeholder="产品介绍(必填)"
          maxlength="255"
        ></textarea>
      </div>
    </div>
    <div class="operate-button">
      <van-button :disabled = 'isDisabled' :loading ='isDisabled'
        type="info" class="confire-public"  @click="createThemeList()">确定发布</van-button>
      <!-- <button class="confire-public" @click="createThemeList()">确定发布</button> -->
      <button @click="empty()">重新填写</button>
    </div>
    <!-- <div class="upload-loading">
      <van-loading color="#1989fa" />
    </div> -->
  </div>
</template>
<script>
import { mapState, mapMutations, mapGetters, mapActions } from "vuex";
import { Uploader, Icon, Notify, Button, Loading   } from "vant";
import {
  areaCodeList,
  createTheme,
  uploaderImage
} from "../../api/api.js";
import { setTimeout } from "timers";
import staturl from '../../api/urls.js'
export default {
  components: {
    [Uploader.name]: Uploader,
    [Icon.name]: Icon,
    [Notify.name]: Notify,
    [Button.name]: Button,
    [Loading.name]:Loading
  },
  data() {
    return {
      fileList: [],
      selectValue1: "购买",
      selectValue2: "线下交易",
      transactionType: ["购买", "出售"],
      transactionMode: ["线下交易"],
      theme: "", // 主题
      contactInformation: "", // 联系方式
      productIntroduction: "", // 产品介绍
      areaCodeNum: 1, //区域号
      tradeAddress: "", // 交易地点
      creator_Id: "", // 创建者id
      tradePrice: null, // 预期交易价格
      type: 1,
      typeWords: "",
      staturl: staturl,
      isDisabled: false
    };
  },
  computed: {
    ...mapState(["areaCode", "creator"])
  },
  created() {
    console.log(this.staturl)
    this.type = this.$route.query.type || 1;
    switch (this.type) {
      case 1:
        this.typeWords = "书籍类";
        break;
      case 2:
        this.typeWords = "健身类";
        break;
      case 3:
        this.typeWords = "特产类";
        break;
      case 4:
        this.typeWords = "其他";
        break;
    }
    if (this.areaCode) {
      this.areaCodeNum = this.areaCode.area_Code;
    }

    if (this.creator) {
      this.creator_Id = this.creator;
    }
  },
  methods: {
    backUp() {
      this.$router.go(-1);
    },
    afterRead(file) {
      // 此时可以自行将文件上传至服务器
      console.log(file);
      console.log(this.fileList);
    },
    // 返回布尔值
    beforeRead(file) {
      if (["image/jpeg", "image/png"].indexOf(file.type) === -1) {
        Notify({
          message: "请上传 jpg、png 格式图片",
          duration: 2000,
          background: "#1989fa"
        });
        return false;
      }
      return true;
    },
    selectType(areaCodes) {},
    selectMode() {},
    empty() {
      this.fileList = [];
      this.selectValue1 = "购买";
      this.selectValue2 = "线下交易";
      this.theme = ""; // 主题
      this.contactInformation = ""; // 联系方式
      this.productIntroduction = ""; // 产品介绍
      (this.tradePrice = null), (this.tradeAddress = "");
    },
    // 创建主题
    createThemeList() {
      this.isDisabled = true;
      let paramObj = {
        area_Code: this.areaCodeNum,
        user_Id: this.creator_Id,
        theme_title: this.theme,
        trade_type: this.selectValue1, // 交易配型
        trade_way: this.selectValue2, // 交易方式
        contact: this.contactInformation,
        show_product: this.productIntroduction,
        category: this.type,
        tradePrice: this.tradePrice,
        tradeAddress: this.tradeAddress
      };
      if (
        !this.theme ||
        !this.contactInformation ||
        !this.type ||
        !this.tradePrice ||
        !this.tradeAddress ||
        !this.productIntroduction
      ) {
        Notify({
          message: "有未填写字段",
          duration: 2000,
          background: "#1989fa"
        });
        this.isDisabled = false;
        return false;
      }
      if (this.fileList.length === 0) {
        Notify({
          message: "请至少上传一张图片",
          duration: 2000,
          background: "#1989fa"
        });
        this.isDisabled = false;
        return false;
      }
      createTheme(paramObj).then(res => {
        if (res.data.checkCode === "PRO-920") {
          this.uploaderImg(res.data.result.theme_id); // 上传图片
        } else {
          this.isDisabled = false;
        }
      });
    },
    // 上传图片
    uploaderImg(theme_id) {
      let formdata = new FormData();
      for (let i = 0; i < this.fileList.length; i++) {
        formdata.append("logo", this.fileList[i].file);
      }
      formdata.append("id", theme_id);
      uploaderImage(formdata).then(res => {
        this.isDisabled = false;
        if (res.data.checkCode === "PRO-920") {
          Notify({
            message: "发布成功",
            duration: 2000,
            background: "#1989fa"
          });
          setTimeout(() => {
            this.$router.push({ path: "/conversation" });
          }, 2000);
        }
      });
    }
  }
};
</script>

<style lang="less" scoped>
.upload-loading {
  width: 100%;
  height: 100%;
  text-align: center;
  position: absolute;
  top: 0px;
}
.create-list-box {
  padding-bottom: 2rem;
}
.relsaer-thing-title {
  line-height: 1rem;
  font-size: 0.4rem;
  line-height: 1rem;
  text-align: center;
  background: #ffffff;
  // margin-bottom: 0.3rem;
  position: relative;
  .back-up {
    width: 1rem;
    height: 1rem;
    line-height: 1.1rem;
    font-size: 0.5rem;
    text-align: center;
    position: absolute;
    top: 0rem;
    left: 0rem;
  }
}
.release-thing {
  padding: 0.2rem 0rem 0rem 0rem;
  font-size: 0.3rem;
  .release-list-box {
    margin-bottom: 0.2rem;
    // padding: 0.2rem 0 0.2rem 0rem;
    padding: 0.2rem 0.2rem 0.2rem 0.5rem;
    box-shadow: 0 0 6px rgba(207,216,221,.1), 0 4px 6px rgba(207,216,221,.1);
    background: #ffffff;
    .release-title {
      display: block;
      margin-bottom: 0.2rem;
    }
    input {
      width: 80%;
      margin: 0 auto;
      border: 1px solid #a28a8a;
      border-radius: 0.12rem;
      height: 0.8rem;
      line-height: 0.8rem;
      text-indent: 0.16rem;
    }
    .project-button {
      width: 3rem;
      height: 0.6rem;
      option {
        font-size: 0.16rem;
        border: none !important;
        box-shadow: none !important;
      }
    }
    textarea {
      width: 80%;
      height: 4rem;
      resize: none;
      border: 1px solid #a28a8a;
      border-radius: 0.12rem;
      text-indent: 0.12rem;
    }
  }
}
.operate-button {
  font-size: 0.2rem;
  text-align: center;
  button {
    width: 2rem;
    height: 0.8rem;
    border: 1px solid #a28a8a;
    background: #90b2d0;
    border-radius: 0.12rem;
    margin-right: 0.4rem;
  }
  button:nth-child(2) {
    background: #f5f5f5;
  }
}
</style>